.bd-sidebar {
    width: 285px;
    position: fixed !important;
    top: 7.2em;
    left: 0;
    bottom: 0;
    z-index: 1;
    background: #fff;
    padding: 0;
    transform: translateX(-100%);
    transition-duration: .5s;
    transition-timing-function: cubic-bezier(.25,.8,.25,1);
    transition-property: transform;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);

    &.active{
        transform: translateX(0);
    }
}

::ng-deep body[dir="rtl"] {
    .bd-sidebar{
        right: 0;
        left: auto;
        transform: translateX(100%);
    }    
}

@media (max-width: 767.98px) {
    .bd-sidebar {
        top: 4.4em;
    }
}
@media (max-width: 400px) {
    .bd-sidebar {
        top: 4.1em !important;
    }
}
@media (min-width: 992px) {
    .bd-sidebar {
        top: 4.4em;
    }
}